import './Cart.css'
// react的hook Api
// useState 创建响应式数据和方法的 api
import { useState, useEffect } from 'react'
import { useNavigate, Link, Outlet, NavLink } from 'react-router-dom'
// useNavigate 函数组件中的  编程式跳转
function Cart (props) {
  let [count, setCount] = useState(1);
  let [myac, setMyac] = useState('myac')
  // 改变count
  let changeCount = () => {
    count = count + 10
    setCount(count)  //用setCount设置回去
  }
  // 相当于 componentDidMount（组件挂载后） 和 componentDidUpdate(组件更新后):
  useEffect(() => {
    console.log("组件挂载后或更新后")
  })
  let Navigate = useNavigate();
  //  useNavigate 函数组件中的  编程式跳转
  //  state传参 类似vue的params 传参
  let turnList = () => {
    Navigate("/list?age=1&dg=99", { state: { pid: 11, age: 88, sex: "男" } });
  }
  return (
    <div>
      <h1>我是购物车组件</h1>
      <h1>{count}</h1>
      <div>
        <NavLink to="/cart/cartleft">左边</NavLink>
        <NavLink to="/cart/cartright">右边</NavLink>
      </div>
      <button onClick={changeCount}>
        改变count
      </button>
      <Link to="/home">去首页</Link>
      <button onClick={turnList}>
        跳转列表页
      </button>
      {/* 子路由的显示位置与router-view类似 */}
      <Outlet></Outlet>
    </div >
  )
}

export default Cart